<!DOCTYPE html>
<html>
<head>
    <title>区域坐标点_列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">

<link rel="stylesheet" type="text/css" href="/lib/iview/iview.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">

<script type="text/javascript" src="/js/vue.js"></script>
<script type="text/javascript" src="/js/zepto.min.js"></script>
<script type="text/javascript" src="/lib/iview/iview.min.js"></script>
<script type="text/javascript" src="/js/vue-components.js"></script>
<script type="text/javascript" src="/js/public.js"></script>
</head>
<body>
<div id="app">
    <div class="g-dg-search-banner">
        <i-form ref="myformRef" :model="myform" :label-width="80" inline>
            <Form-item label="name">
            <i-input v-model="myform.name" placeholder="请输入"></i-input>
    	 	 </Form-item>
            <Form-item label="blng">
            <i-input v-model="myform.blng" placeholder="请输入"></i-input>
    	 	 </Form-item>
            <Form-item label="blat">
            <i-input v-model="myform.blat" placeholder="请输入"></i-input>
    	 	 </Form-item>
        </i-form>
    </div>
    <div class="g-dg-toolbar">
        <i-button type="info" icon="search" @click="reload">查询</i-button>
        <i-button type="primary" icon="android-add-circle" @click="add()">新增</i-button>
        <i-button type="error" icon="android-remove-circle" @click="remove">删除</i-button>
    </div>
    <i-table :data="dtData" :columns="dtCols" :height="getTableHeight" size="small" :highlight-row="true"
             @on-current-change="onCurrentChange" stripe  @on-selection-change="onSelRows" @on-row-dblclick="edit"></i-table>
    <div class="g-dg-footbar">
        <div>
            <Page :total="total" :current="pageNo" show-elevator show-sizer show-total placement="top"
                  @on-change="changePage" @on-page-size-change="changePageSize" ></Page>
        </div>
    </div>
</div>
<script>
    const urls = {
        fildPage:'/api/map/mapcfgareapoint/findPage'
        ,delete:'/api/map/mapcfgareapoint/delete'
    };
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                title: ' 区域坐标点',
                myform: {
                    plevel : 0
                    ,selRows: null//选中的行 字符串，用,号隔开
                    ,currentRow:null//选中的行
                    ,pageNo: 1
                    ,pageSize: 10
                    ,state:-1
                },
                total: 0,
                dtData: [],
                dtCols: [
                    {
                        type: 'selection'
                        ,width: 60
                        ,align: 'center'
                    },
                    {
                        title: 'name',
                        key: 'name'
                    },
                    {
                        title: 'blng',
                        key: 'blng'
                    },
                    {
                        title: 'blat',
                        key: 'blat'
                    },
                    {
                        title: 'glng',
                        key: 'glng'
                    },
                    {
                        title: 'glat',
                        key: 'glat'
                    },
                    {
                        title: 'create_Time',
                        key: 'createTime'
                    },
                    {
                        title: 'update_Time',
                        key: 'updateTime'
                    },
                    {
                        title: 'LAYER_id',
                        key: 'layerId'
                    },
                    {
                        title: 'area_id',
                        key: 'areaId'
                    },
                    {
                        title: '操作',
                        width: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style:{
                                        marginRight:'5px'
                                    },
                                    on: {
                                        click:() => {
                                            setTimeout(()=>{ // 延迟一下，让选中行事件先执行，才能拿到currentRow
                                                this.edit();
                                            },100);
                                        }
                                    },
                                }, '修改')
                            ]);
                        }
                    }
                ]
            }
        },
        created(){
            this.loadData();
        },
        computed: {
            getTableHeight(){
                return (window.innerHeight - 150);
            }
        },
        methods: {
            loadData () {
                let that = this;
                PB.ajax({url:urls.fildPage,data:this.myform}, function (d) {
                    that.dtData = d.data;
                    that.total = d.total;
                });
            },
            onSelRows(selection){
                if(selection){
                    this.myform.selRows = selection.map(q => q.id).toString();
                }
            },
            reload(){
                this.myform.pageNo = 1;
                this.loadData();
            },
            onCurrentChange(currentRow, oldCurrentRow){
                this.myform.currentRow = currentRow;
            },
            changePage (e) {
                this.myform.pageNo = e;
                this.loadData();
            },
            changePageSize(e){
                this.myform.pageNo = 1;
                this.myform.pageSize = e;
                this.loadData();
            },
            add(){//新增
                PB.showFormPage('map/mapcfgareapoint_detail', this.title, {width:650});
            },
            edit(){//编辑
                if(this.myform.currentRow){
                    PB.showFormPage('map/mapcfgareapoint_detail?id=' + this.myform.currentRow.id, this.title, {width:650});
                }else{
                    PB.showFormPage('map/mapcfgareapoint_detail' , this.title,{width:650});
                }
            },
            remove(){
                if(this.myform.selRows) {
                    let that = this;
                    PB.confirm('确定删除吗？', function () {
                        PB.ajax({url:urls.delete,data:that.myform}, function (d) {
                            that.reload();
                        });
                    });
                }
            }
        }
    })

    function saveOK() {
        vm.reload();
    }
</script>
</body>
</html>
